<template>
    <section>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>设备信息</span>
            </div>
            <div >
                <el-tabs v-model="active" class="tabsdiv">
                    <el-tab-pane label="设备台账" name="first">
                        <div class="content">
                            <div>
                                <div>设备台账</div>
                                <div class="sbname">设备名称：空调设备1</div>
                                <div class="sblable">所属系统：空调系统</div>
                                <div class="sblable">设备品牌：格力品牌</div>
                                <div class="sblable">设备型号：通用空调型号</div>
                                <div class="sblable">设备编号：SB-F1-101</div>
                                <div class="sblable">设备地址：图书馆F1-101</div>
                            </div>
                            <div>
                               <div>维保信息</div> 
                                <el-card class="wbxinxi" shadow="always">
                                    <div class="wbfzrval">泛在联通科技有限公司</div>
                                    <div class="wbfzrlb">维保负责单位</div>
                                </el-card>
                                <el-card class="wbxinxi" shadow="always">
                                    <div class="wbfzrval"><span>李大钊</span><span class="phone">18680052098</span> </div>
                                    <div class="wbfzrlb">维保负责人</div>
                                </el-card>
                            </div>
                            <div >
                                <div class="wbzq1">维保周期：<span> 2022-06-01 ~ 2022-07-01 </span> </div>
                                <div class="wbzq">
                                    上次维保时间：<span> -- </span>
                                </div>
                                <div class="wbzq">
                                    下次维保时间：<span> -- </span>
                                </div>
                                <div>
                                    <div>维保记录</div>
                                    <el-card class="wbjl" shadow="always">
                                        <div class="wbjumx" v-for="(item,index) in weibaojilus" :key="index">
                                            <span>{{item.name}}：</span> <span>{{item.dateTime}}</span>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                
            </div>
        </el-card>
    </section>
</template>

<script>
    import {
        // ibmswritecommand
    } from '../../url/api';
    export default {
        props: ['devicedata'],
        data() {
            return {
                active: 'first',
                isShowTooltip: false,
                money: 0,
                moduleData: {},
                form: {},
                formdata: {},
                visible: false,
                weibaojilus:[
                {
                        name:"第1次维保时间",
                        dateTime:'2022-06-01 15:00:00',
                    },{
                        name:"第2次维保时间",
                        dateTime:'2022-06-02 15:00:00',
                    },{
                        name:"第3次维保时间",
                        dateTime:'2022-06-03 15:00:00',
                    },{
                        name:"第4次维保时间",
                        dateTime:'2022-06-04 15:00:00',
                    },{
                        name:"第5次维保时间",
                        dateTime:'2022-06-05 15:00:00',
                    }
                ]
            }
        },
        watch: {
            devicedata(val) {
                //  console.log("卡片数据");
            },
            // moduleInfor(val) {
            //     //console.log(val)
            //     this.moduleData = val
            // },
        },
        methods: {
            onMouseOver(str) { // 内容超出，显示文字提示内容
                // console.log(str, "AAAAAAAAAAA");
                const tag = this.$refs[str]
                // console.log(tag, "BBBBBBBBBB");
                const neirongWidth = tag[0].firstChild.length // 内容长度

                this.isShowTooltip = neirongWidth <= 5;//大于五个字隐藏
                // console.log(this.isShowTooltip, neirongWidth, "CCCCCCCCCCC");
            },
            switchchange(data) {
                // console.log(data, "AAAAAAAAAAAAAAAAA");
            },
            handleCurrentPage(val) {//页码房间列表
                this.$emit('changePage', val)
            },
            pClose(index) {
                // console.log('popover_' + index);
                this.$refs['popover_' + this.devicedata.deviceId + '_' + index][0].doClose();
            },
            inputfocus(data) {
                // console.log(data);
                this.formdata = {
                    value: data
                }
                //    this.formdata.value = data
            },
            setwrite(index, item) {
                // console.log(item);
                let params = {
                    deviceIds: [],
                    sn: item.sn,
                    value: item.value,
                    valueType: item.valueType
                }
                if (item.realType != 'bool') {
                    params.value = this.formdata.value
                }
                params.deviceIds.push(this.devicedata.deviceId)
                // console.log(params);
                // ibmswritecommand(params).then((res) => {
                //     if (res.data.code == 200) {
                //         // this.$emit('readData', params);
                //         let data = res.data.data
                //         data.forEach(val => {

                //             this.$message.success('设备：' + val.deviceName + '  ， ' + val.result);
                //         });

                //     }
                // });
                // this.$emit('readData', params);
                this.pClose(index)
            }

        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;

        /* overflow-y: scroll; */
    }

    .itembox {
        margin-bottom: 10px;
    }

    .content {
        display: flex;
        color:#fff;
        flex-wrap: nowrap;
    justify-content: space-between;
    }
    .content > div{
        width: 33.3%;
        height: 300px;
        padding: 10px
    }
   

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .clearfix {
        /* text-align: center; */
        /* font-weight: 600; */
        /* font-style: italic; */
        color: rgb(255, 255, 255);
        letter-spacing: 2px;
        font-size: 13px;

    }

    .box-card {
        /* width: 480px; */
        /* height: 240px; */
        overflow: hidden;
        /* margin: 10px 0 0 10px; */
        background-color: rgba(7, 172, 194, 0.2);
    }

    .imgbox_img {
        width: 260px;
        height: 130px;
    }

    .box-card>>>.el-card__body {
        padding: 5px !important;
    }

    .box-card>>>.el-card__header {
        background-color: rgba(7, 172, 194, 0.1);
        padding: 10px !important;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 3px;
    }

    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
        background: #78b4b4;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 10px;
        background: #ededed;
    }

    .el-form-item {
        margin-bottom: 0px !important;
    }

    .hangnei {
        display: flex;
        align-items: center;
    }

    .labelname {
        font-size: 12px;
        display: inline-block;
        width: 73px;
        padding: 0 10px;
        /* text-align: center; */
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .caozuok {
        display: inline-block;
        width: calc(100% - 90px);
    }
    .tabsdiv{
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    .tabsdiv /deep/ .el-tabs__item{
        color: #ffffff;
        
    }
    .tabsdiv /deep/ .is-active {
        /* color: #409EFF; */
        border-bottom: 2px solid #409EFF;
    }

    .tabsdiv /deep/ .el-tabs__active-bar {
        display: none;
    }

    .tabsdiv /deep/ .el-tabs__nav-wrap::after {
        display: none;
    }
    .tabsdiv /deep/ .el-tabs__nav-wrap{
        border-bottom: 1px solid rgba(13, 182, 204, 0.6);
    }
    .sblable{
        margin-top: 10px;
        color: #a4f8f8;
        font-weight:100;
        font-size: 13px;
    }
    .wbxinxi{
        background-color: rgba(2, 107, 121, 0.5);
        box-shadow:5px 5px 10px rgb(1, 136, 160);
        margin-top: 15px;
        height: 80px;
        color: #fff;
    }
    .wbfzrval{
        font-size: 15px;
        line-height: 35px;
        text-align: center;
        color: #409EFF;
    }
    .wbfzrlb{
        color: #c3c6c7;
        line-height: 30px;
        text-align: center;
    }
    .phone{
        margin-left: 10px;
    }
    .wbzq{
      margin-bottom: 10px;
      color: rgb(211, 211, 211);
    }
    .wbzq1{
        margin-bottom: 10px;
        color: #fff;
    }
    .wbjl{
        margin-top: 5px;
        background-color: rgba(2, 107, 121, 0.5);
        height: 185px;
        border:  0px solid rgb(161, 161, 161);
        color: rgb(211, 211, 211);
        font-size: 13px;
        overflow: auto;
        text-align: center;
    }
    .wbjumx{
        margin-bottom: 5px;
    }
    .sbname{
        color: #409EFF;
        margin-top: 10px;
    }
</style>